<template>
  <div class="home-musiclist">
    <!-- 列表头部 -->
    <div class="list-top">
      <div class="left">发现好歌单</div>
      <div class="right">查看更多</div>
    </div>

    <!-- 轮播组件 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <router-link :to="{path:'/list',query:{id:item.id},name:'list'}" class="swiper-slide" v-for="item in musicList" :key="item.id">
          <img :src="item.picUrl" />
          <div class="name">{{item.name}}</div>
          <div class="count">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-play" />
            </svg>
            <span>{{changeValue(item.playCount )}}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
// 引入swiper
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import { getMusicList } from '@/Api/request.js'

export default {
  data() {
    return {
      musicList: []
    }
  },
  mounted: async function () {
    const { data: res } = await getMusicList()
    this.musicList = res.result
  },
  updated() {
    var mySwiper = new Swiper('.swiper', {
      pagination: '.swiper-pagination',
      slidesPerView: 3.2,
      spaceBetween: 10,
      freeMode: true
    })
  },
  methods: {
    changeValue(num) {
      let res = 0
      if (num >= 100000000) {
        res = num / 100000000
        res = res.toFixed(2) + '亿'
      } else if (num >= 10000) {
        res = num / 10000
        res = res.toFixed(2) + '万'
      }
      return res
    }
  }
}
</script>

<style lang="less" scoped>
.home-musiclist {
  margin-top: 0.3rem;
  width: 100%;
  overflow: hidden;
  .list-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    .left {
      font-size: 0.35rem;
      font-weight: bold;
    }
    .right {
      border: 1px solid #efefef;
      padding: 0.1rem 0.15rem;
      border-radius: 0.3rem;
      font-size: 0.2rem;
    }
  }
  .swiper {
    .swiper-slide {
      height: 2.7rem;
      position: relative;
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
        border-radius: 0.15rem;
      }
      .name {
        width: 100%;
        height: auto;
        font-size: 0.25rem;
      }
      .count {
        position: absolute;
        font-size: 0.2rem;
        top: 0.1rem;
        right: 0.1rem;
        color: #ffffff;
        display: flex;
        align-items: center;
        .icon {
          fill: #ffffff;
          width: 0.2rem;
          margin-right: 0.05rem;
        }
      }
    }
  }
}
</style>